<template>
  <div class="container">
    <div class="tip">
      <h4>
        <span>*</span>温馨提示
      </h4>
      <p>1. 当前银行限额信息仅做参考，以实际为准；</p>
      <p>2. 充值限额与您的银行卡签约信息、银行额度政策有关， 您可咨询相关银行；</p>
      <p>3. 针对限额如有疑问，请咨询客服：400-1568-818。</p>
    </div>
    <div class="table">
      <div class="thead">
        <div class="tr">
          <div class="td">银行列表</div>
          <div class="td">限额说明(元)</div>
        </div>
      </div>
      <div class="tbody">
        <div class="tr">
          <div class="td">工商银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">农业银行</div>
          <div class="td">单笔2000 | 单日1万</div>
        </div>
        <div class="tr">
          <div class="td">中国银行</div>
          <div class="td">单笔无限额 | 单日无限额</div>
        </div>
        <div class="tr">
          <div class="td">建设银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">交通银行</div>
          <div class="td">单笔1万 | 单日1万</div>
        </div>
        <div class="tr">
          <div class="td">招商银行</div>
          <div class="td">单笔5000 | 单日5000</div>
        </div>
        <div class="tr">
          <div class="td">中信银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">光大银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">华夏银行</div>
          <div class="td">单笔2000 | 单日2000</div>
        </div>
        <div class="tr">
          <div class="td">民生银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">兴业银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">广发银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">平安银行</div>
          <div class="td">单笔2万 | 单日2万</div>
        </div>
        <div class="tr">
          <div class="td">浦发银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">邮政储蓄</div>
          <div class="td">单笔无限额 | 单日无限额</div>
        </div>
        <div class="tr">
          <div class="td">北京银行</div>
          <div class="td">单笔5000 | 单日5000</div>
        </div>
        <div class="tr">
          <div class="td">上海银行</div>
          <div class="td">单笔5万 | 单日5万</div>
        </div>
        <div class="tr">
          <div class="td">其它区域性银行</div>
          <div class="td">单笔无限额 | 单日无限额</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  padding: 40px 32px;
  > .tip {
    text-align: justify;
    margin-bottom: 48px;
    > h4 {
      padding: 0;
      margin: 0;
      font-size: 28px;
      font-weight: 400;
      color: #111111;
      margin-bottom: 20px;
      > span {
        color: #fe6018;
      }
    }
    > p {
      font-size: 28px;
      font-weight: 400;
      line-height: 46px;
      color: rgba(51, 51, 51, 1);
    }
  }

  > .table {
    width: 100%;
    border: 1px solid #ececec;
    > .thead,
    > .tbody {
      width: 100%;
      > .tr {
        display: flex;
        align-content: center;

        background-color: #ececec;
        font-size: 28px;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        border-bottom: 1px solid #ececec;
        &:last-of-type {
          border: none;
        }
        > .td {
          width: 40%;
          height: 100px;
          text-align: center;
          line-height: 100px;
          border-right: 1px solid #ececec;
        }
        > .td:nth-of-type(2) {
          width: 60%;
        }
      }
    }
    > .tbody {
      > .tr {
        background-color: #fff;
      }
    }
  }
}
</style>
